<!doctype html>
<html lang="en">
  <head>
    @@include("partials/head.html", {
      "title": "Dashkit"
    })
  </head>
  <body>

    <!-- MODALS
    ================================================== -->
    @@include("partials/modals.html")

    <!-- SIDEBAR
    ================================================== -->
    @@include("partials/sidebar.html", {
      "category": "pages",
      "subcategory": "",
      "page": "settings.html",
      "user": true
    })

    <!-- MAIN CONTENT
    ================================================== -->
    <div class="main-content">
      <div class="container-fluid">
        <div class="row justify-content-center">
          <div class="col-12 col-lg-10 col-xl-8">
            
            <!-- Header -->
            <div class="header mt-md-5">
              <div class="header-body">
                <div class="row align-items-center">
                  <div class="col">
                    
                    <!-- Pretitle -->
                    <h6 class="header-pretitle">
                      Overview
                    </h6>

                    <!-- Title -->
                    <h1 class="header-title">
                      Settings
                    </h1>

                  </div>
                </div> <!-- / .row -->
                <div class="row align-items-center">
                  <div class="col">
                    
                    <!-- Nav -->
                    <ul class="nav nav-tabs nav-overflow header-tabs">
                      <li class="nav-item">
                        <a href="#!" class="nav-link active">
                          General
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#!" class="nav-link">
                          Profile
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#!" class="nav-link">
                          Billing
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#!" class="nav-link">
                          Notifications
                        </a>
                      </li>
                    </ul>

                  </div>
                </div>
              </div>
            </div>

            <!-- Form -->
            <form class="mb-4">

              <div class="row">
                <div class="col-12 col-md-6">
                  
                  <!-- First name -->
                  <div class="form-group">

                    <!-- Label -->
                    <label>
                      First name
                    </label>

                    <!-- Input -->
                    <input type="text" class="form-control">

                  </div>

                </div>
                <div class="col-12 col-md-6">
                  
                  <!-- Last name -->
                  <div class="form-group">

                    <!-- Label -->
                    <label>
                      Last name
                    </label>

                    <!-- Input -->
                    <input type="text" class="form-control">

                  </div>

                </div>
                <div class="col-12">
                  
                  <!-- Email address -->
                  <div class="form-group">

                    <!-- Label -->
                    <label class="mb-1">
                      Email address
                    </label>

                    <!-- Form text -->
                    <small class="form-text text-muted">
                      This contact will be shown to others publicly, so choose it carefully.
                    </small>

                    <!-- Input -->
                    <input type="email" class="form-control">

                  </div>

                </div>
                <div class="col-12 col-md-6">
                  
                  <!-- Phone -->
                  <div class="form-group">

                    <!-- Label -->
                    <label>
                      Phone
                    </label>

                    <!-- Input -->
                    <input type="text" class="form-control mb-3" placeholder="(___)___-____" data-mask="(000) 000-0000">

                  </div>

                </div>
                <div class="col-12 col-md-6">
                  
                  <!-- Birthday -->
                  <div class="form-group">

                    <!-- Label -->
                    <label>
                      Birthday
                    </label>

                    <!-- Input -->
                    <input type="text" class="form-control" data-toggle="flatpickr">

                  </div>

                </div>
              </div> <!-- / .row -->

              <!-- Divider -->
              <hr class="mt-4 mb-5">

              <div class="row">
                <div class="col-12 col-md-6">
                  
                  <!-- Public profile -->
                  <div class="form-group">

                    <!-- Label -->
                    <label class="mb-1">
                      Public profile
                    </label>

                    <!-- Form text -->
                    <small class="form-text text-muted">
                      Making your profile public means that anyone on the Dashkit network will be able to find you.
                    </small>

                    <div class="row">
                      <div class="col-auto">
                        
                        <!-- Toggle -->
                        <div class="custom-control custom-checkbox-toggle">
                          <input type="checkbox" class="custom-control-input" id="toggleOne">
                          <label class="custom-control-label" for="toggleOne"></label>
                        </div>

                      </div>
                      <div class="col ml--2">
                        
                        <!-- Help text -->
                        <small class="text-muted">
                          You're currently invisible
                        </small>

                      </div>
                    </div> <!-- / .row -->
                  </div>

                </div>
                <div class="col-12 col-md-6">
                  
                  <!-- Allow for additional Bookings -->
                  <div class="form-group">

                    <!-- Label -->
                    <label class="mb-1">
                      Allow for additional Bookings
                    </label>

                    <!-- Form text -->
                    <small class="form-text text-muted">
                      If you are available for hire outside of the current situation, you can encourage others to hire you.
                    </small>

                    <div class="row">
                      <div class="col-auto">
                        
                        <!-- Toggle -->
                        <div class="custom-control custom-checkbox-toggle">
                          <input type="checkbox" class="custom-control-input" id="toggleTwo" checked>
                          <label class="custom-control-label" for="toggleTwo"></label>
                        </div>

                      </div>
                      <div class="col ml--2">
                        
                        <!-- Help text -->
                        <small class="text-muted">
                          You're currently available
                        </small>

                      </div>
                    </div> <!-- / .row -->
                  </div>

                </div>
              </div> <!-- / .row -->

              <!-- Divider -->
              <hr class="mt-4 mb-5">

              <div class="row">
                <div class="col-12 col-md-6 order-md-2">
                  
                  <!-- Card -->
                  <div class="card bg-light border ml-md-4">
                    <div class="card-body">
                      
                      <p class="mb-2">
                        Password requirements
                      </p>

                      <p class="small text-muted mb-2">
                        To create a new password, you have to meet all of the following requirements:
                      </p>

                      <ul class="small text-muted pl-4 mb-0">
                        <li>
                          Minimum 8 character
                        </li>
                        <li>
                          At least one special character
                        </li>
                        <li>
                          At least one number
                        </li>
                        <li>
                        Can’t be the same as a previous password
                        </li>
                      </ul>

                    </div>
                  </div>

                </div>
                <div class="col-12 col-md-6">

                  <!-- Password -->
                  <div class="form-group">

                    <!-- Label -->
                    <label>
                      Password
                    </label>

                    <!-- Input -->
                    <input type="password" class="form-control">

                  </div>

                  <!-- New password -->
                  <div class="form-group">

                    <!-- Label -->
                    <label>
                      New password
                    </label>

                    <!-- Input -->
                    <input type="password" class="form-control">

                  </div>

                  <!-- Confirm new password -->
                  <div class="form-group">

                    <!-- Label -->
                    <label>
                      Confirm new password
                    </label>

                    <!-- Input -->
                    <input type="password" class="form-control">

                  </div>

                  <!-- Submit -->
                  <button type="submit" class="btn btn-primary">
                    Update password
                  </button>
                  
                </div>
              </div> <!-- / .row -->

            </form>

          </div>
        </div> <!-- / .row -->
      </div> <!-- / .container-fluid -->
    </div> <!-- / .main-content -->

    <!-- JAVASCRIPT
    ================================================== -->
    @@include("partials/scripts.html")

  </body>
</html>